<template>
  <div class="login-page">
    <div class="form">
      <a-form
        ref="formRef"
        :model="form"
        :style="{ width: '450px' }"
        @submit="handleSubmit"
        :label-col-props="{ span: 5, offset: 0 }"
        :wrapper-col-props="{ span: 15, offset: 0 }"
      >
        <div class="exit">
          <a-button type="text" @click="clickToHome">
            <template #icon><icon-home :size="20" /></template>
          </a-button>
          <a-button type="text" @click="clickExitHandler">
            <template #icon><icon-export :size="20" /></template>
          </a-button>
        </div>
        <a-form-item :style="{ 'justify-content': 'center' }">
          <div style="font-size: 20px; font-weight: 600">登录微博客后台</div>
        </a-form-item>
        <a-form-item
          field="username"
          label="用户"
          validate-trigger="input"
          :rules="[
            { required: true, message: '用户必填' },
            { minLength: 3, message: '用户名不少于3位数' },
          ]"
        >
          <a-input v-model="form.username" placeholder="请输入用户名">
            <template #prefix>
              <icon-user />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
          field="password"
          label="密码"
          validate-trigger="input"
          :rules="[
            { required: true, message: '密码必填' },
            { minLength: 3, message: '密码至少3位数' },
          ]"
        >
          <a-input-password v-model="form.password" placeholder="请输入密码">
            <template #prefix>
              <icon-lock />
            </template>
          </a-input-password>
        </a-form-item>
        <a-form-item>
          <a-button
            html-type="submit"
            :loading="load"
            shape="round"
            type="primary"
            style="width: 100%"
            >{{ loadstr }}</a-button
          >
          <a-button
            @click="$refs.formRef.resetFields()"
            shape="round"
            type="text"
            >重置</a-button
          >
        </a-form-item>
      </a-form>
      <!-- {{ form }} -->
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { LOGIN } from "@/api/user";
import { Message } from "@arco-design/web-vue";
// import Cookies from "js-cookie";
import { useRouter } from "vue-router";
import { isLogin } from "../../router/user";
const form = reactive({
  username: "",
  password: "",
});
const router = useRouter();
const load = ref(false);
const loadstr = ref("登录");
onMounted(() => {
  var headings = document.evaluate(
    '//input[@placeholder="请输入用户名"]',
    document,
    null,
    XPathResult.ANY_TYPE,
    null
  );
  var thisHeading = headings.iterateNext();
  thisHeading.focus();
});
const clickExitHandler = () => {
  router.push({
    name: "blogs",
  });
};
const clickToHome = () => {
  router.push({
    name: "blogs",
  });
};
const handleSubmit = async ({ values, errors }) => {
  if (errors === undefined) {
    if (isLogin()) {
      console.log("已经登录了", values);
      // router.push({
      //   name: "backstageBlogs",
      // });
    } else {
      console.log("未登录，开始登录");
      load.value = !load.value;
      loadstr.value = "登录中...";
      try {
        await LOGIN(values).then(
          () => {
            // console.log("成功回调执行", value);
            Message.success({
              content: "登录成功",
              closable: true,
              duration: 2000,
            });
            // Cookies.set("uid", `${value.Msg.uid}`, {
            //   expires: 1,
            //   path: "",
            // });
            // Cookies.set("user", `${value.Msg.user}`, {
            //   expires: 1,
            //   path: "",
            // });
            let { rewrite, ...otherquery } = router.currentRoute.value.query;
            let rewriteName = "/backstage/admin/blogs";
            if (rewrite) {
              rewriteName = rewrite;
            }
            const pageInfo = {
              path: rewriteName,
              query: otherquery,
            };
            if (history.state.params !== undefined) {
              pageInfo["state"] = { params: history.state.params };
            }
            router.push(pageInfo);
          },
          (reason) => {
            // console.log("失败回调执行", reason);
            Message.error({
              content: reason,
              closable: true,
              duration: 2000,
            });
          }
        );
      } catch (error) {
        console.log(error);
      } finally {
        load.value = !load.value;
        loadstr.value = "登录";
      }
    }
  }
};
</script>

<style scoped>
.exit {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.login-page {
  display: flex;
  width: 500px;
  /* height: 100vh; */
  /* padding: 8% 0 0; */
  margin: auto;
}
.grid-demo {
  margin-left: 2px;
}
.form {
  display: flex;
  position: relative;
  height: 100vh;
  margin: auto;
  padding: 45px;
  text-align: center;
  align-items: center;
}
</style>
